<template>
  <div ref="my_table" class="container_content">
    <el-table
        v-loading="loading"
        :cell-style="{
        padding: `${padding}px 0`,
        cursor: 'pointer',
        textAlign: 'center',

      }"
        :data="handleTableDate"
        :header-cell-style="{ background: '#f4f4f5', textAlign: 'center' }"
        :row-style="{ textAlign: 'center' ,height: `${trHeight}px`}"
        class="table-main"
        style="width: 100%"

    >
      <el-table-column
          v-for="tableItem in tableHead"
          :key="tableItem.dataName"
          :label="tableItem.title"
          :min-width="tableItem.minWidth"
          :prop="tableItem.dataName"
          :width="tableItem.width"
          show-overflow-tooltip
      ></el-table-column>
      <slot></slot>
    </el-table>
    <el-pagination
        :current-page="pageNum"
        :page-size="pageSize"
        :total="total"
        class="table-footer"
        layout="total, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
import {cloneDeep, debounce} from "lodash";
import {mapState, mapMutations} from "vuex"
import utils from "@/utils";

export default {
  name: "Table",
  props: {
    /**
     * @param {Array} tableThead 表头
     * @param {Object} tableThead:[
     * {
     * dataName  :数据名
     * title     :表头文字
     * minWidth  :最小宽度
     * width     :固定宽度
     *}
     *]
     * */
    tableHead: {
      type: Array,
      default: () => [],
      required: true,
    },
    //  表格数据
    tableData: {
      type: Array,
      default: () => []
    },
    padding: {
      type: String,
      default: "10",
    },
    //单元格高度
    trHeight: {
      type: Number,
      default: 47
    },
    //table距离上方的高度
    tableHeightY: {
      type: Number,
      default: 0,
    },
    //总数
    total: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      //窗口大小
      height: 0,
      loading: true,
    };
  },
  computed: {
    ...mapState(["pageSize", 'pageNum']),
    /**表格数据添加序号**/
    handleTableDate() {
      this.closeLoading();
      let _data = cloneDeep(this.$props.tableData);
      let result = [];
      _data.forEach((item, index) => {
        item["index"] = (index + ((this.pageNum - 1) * this.pageSize + 1)).toString();
        result.push(item);
      });
      return result;
    },


  },
  mounted() {
    this.windowResizeFn();
    window.addEventListener("resize", debounce(this.windowResizeFn, 600));
  },
  beforeDestroy() {
    window.onresize = () => {
    };
  },
  methods: {
    ...mapMutations({setPageNum: 'SET_PAGE_NUM', setPageSize: "SET_PAGE_SIZE"}),
    //监视窗口
    windowResizeFn() {
      this.height = document.body.clientHeight;
    },

    // 选中页改变
    handleCurrentChange(val) {
      this.loading = true;
      this.setPageNum(val)
      this.$emit("dataInit");
    },
    //窗口改变 pageSize 改变 pageNum改变
    handlePageSize(nv = 0, ov = 0) {

      //table的上边元素的高度
      let trHeight = this.$props.trHeight;
      const
          offsetTop = 125,
          tableHead = 48,
          tableHeightY = this.$props.tableHeightY,
          sum =
              offsetTop + tableHead +
              tableHeightY;
      //计算新的页面展示数量 当前body高度 - 上边元素高度 / 单元格高度  最少为 1 条
      let _newSize =
          Math.round((nv - sum > 0 ? nv - sum : 0) / trHeight) >= 1
              ? Math.round((nv - sum > 0 ? nv - sum : 0) / trHeight)
              : 1;
      let newSize = _newSize >= 1 ? _newSize : 1;
      //计算当前数据在新的pageSize的哪一页 改变前数据的长度 * 上一页的页码 / 新的页面展示数量
      let tbDataLang = this.tableData.length
      let _pageNum = Math.round(
          (tbDataLang * this.pageNum) / newSize
      );
      let pageNum =
          nv > ov ? _pageNum : _pageNum - tbDataLang + 1;
      if (newSize <= this.pageSize) return
      this.loading = true;
      this.setPageSize(newSize)
      this.setPageNum(pageNum > 0 ? pageNum : 1)
      //改变后刷新数据
      this.$emit("dataInit");
    },
    async closeLoading() {
      await utils.delay(500);
      this.loading = false;
    },
  },
  watch: {
    height(nv, ov) {
      this.handlePageSize(nv, ov);
    },

  },
};
</script>

<style lang="scss" scoped>
.container_content {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;

  .table-footer {
    height: 60px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}


::v-deep .el-table:before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}

::v-deep .el-table .cell {
  text-align: center;
}

::v-deep .gutter {
  background-color: rgb(244, 244, 245) !important;
}

::-webkit-scrollbar {
  width: 10px;
  height: 5px;
  border-radius: 10px;
}

</style>
